<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="./js/dijit/themes/tundra/tundra.css"/>
        <style type="text/css">
            #container {
                position: relative;
                border: 1px solid green;
                width: 960px;
                height: 600px;
            }
        </style>
    </head>
    <body class="tundra">
    <div id="container">
        <div id="dialogOne" dojoType="dijit.Dialog" title="myDialog" style="position:relative;left:20px;top:0px;">
            <div id="tapContainer" dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
                <div dojoType="dijit.layout.ContentPane" title="foo">
                    content of tap foo
                </div>
                <div dojoType="dijit.layout.ContentPane" title="boo">
                    content of tap boo
                </div>
            </div>
        </div>
        <div id="dialogByProg">
        </div>
        <div>
            <button id="buttonOne" dojoType="dijit.form.Button" type="button">
                Show me!
                <script type="dojo/method" event="onClick" args="evt">
                    // Show the Dialog:
                    dijit.byId("dialogOne").show();
                </script>
            </button>
            <button type="button" dojoType="dijit.form.Button" onClick="showDialogByProg();">
                produce a dialog
            </button>
            <button type="button" dojoType="dijit.form.Button" onClick="dojo.byId('dialogTwo').hide();">
                produce a dialog
            </button>
        </div>
        <div>
            <p>
                When pressing this button the dialog will popup:
            </p>
            <button id="buttonThree" dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').show();dojo.animateProperty({node:'formDialog',duration:2000,properties:{left:{end:'20',units:'px'},width:{start:'0', units:'px'},height:{start:0,units:'px'}}}).play();/*dojo.place('<p>fsda</p>','dialogDivTableContainer','last')*/">
                Show me!
            </button>
        </div>
    </div>

    <div id="dialogContainer">
        <div id="formDivContainer">
            <div dojoType="dijit.Dialog" id="formDialog" title="Form Dialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
               <div id="dialogDivTableContainer" > <table>
                    <tr>
                        <td>
                            <label for="name">
                                Name:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.TextBox" type="text" name="name" id="name">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="loc">
                                Location:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.TextBox" type="text" name="loc" id="loc">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="date">
                                Start date:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.DateTextBox" type="text" name="sdate" id="sdate">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="date">
                                End date:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.DateTextBox" type="text" name="edate" id="edate">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="date">
                                Time:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.TimeTextBox" type="text" name="time" id="time">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="desc">
                                Description:
                            </label>
                        </td>
                        <td>
                            <input dojoType="dijit.form.TextBox" type="text" name="desc" id="desc">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <button id="formBtnOk" dojoType="dijit.form.Button" type="submit" onClick="return true/*dijit.byId('formDialog').isValid();*/">
                                OK
                            </button>
                            <button id="formBtnCancel" dojoType="dijit.form.Button" type="button" onClick="dijit.byId('formDialog').hide();console.log('hide');">
                                Cancel
                            </button>
                        </td>
                    </tr>
                </table></div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./js/dojo/dojo.js">
</script>
<script type="text/javascript">
    
    dojo.require('dijit.Dialog');
    dojo.require('dijit.layout.TabContainer');
    dojo.require('dijit.layout.ContentPane');
    dojo.require('dijit.Dialog');
    
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.TimeTextBox")
    
    var dialog;
    var formDlg;
    dojo.ready(function(){
    
        dialog = new dijit.Dialog({
            id: 'dialogTwo',
            title: 'dialogtitle',
            content: '</p>title</p><span> contnet conten</span><button type"button" dojoType="dijit.form.Button" onClick="alert(this);">dojobtn</button>',
            style: "widht:300px;",
        });
        
        dojo.parser.parse(dojo.byId("formDivContainer"));
        formDlg = dijit.byId("formDialog");
        
        console.log(formDlg.domNode);
		console.log(dojo.byId("buttonThree"));
		/*
        // connect to the button so we display the dialog on click:
        dojo.connect(dijit.byId("buttonThree"), "onclick", formDlg, function(evt){
			this.show();
			console.log("show");
		});*/
        
        
    });
    function showDialogByProg(){
        console.log('fdsaf');
        dialog.show();
        
    }
    
    function checkData(){
        var data = formDlg.attr('value');
        console.log(data);
        if (data.sdate > data.edate) {
            alert("Start date must be before end date");
            return false;
        }
        else {
            return true;
        }
    }
    
    dojo.ready(function(){
        /*
         * it's the best to perform the parse time, in case we'll manipulate the dom before doc ready
         */
        dojo.parser.parse(/*dojo.byId('container')*/);
    });
</script>
